<template>
    <section class="operative">
        <Cancel :toCancelBlock='cancelBlock' @closeModal="CloseModal" />
        <Danger :toDangerBlock='dangerBlock' />
        <div class="operative_site">
            <h1>手术部位：
                <span>{{operations.name}}</span>
            </h1>
            <div class="people_img relative">
                <img src="@/assets/img/check_people.png" class="" alt="check people" />
                <div class="eye_btn" @click="commit_dc(2)">
                    <img :src="eye_img" alt="check people" />
                </div>
            </div>
            <div class="bolder_bottom"></div>
            <h1 class="danger_p">
                过敏史：青霉素
            </h1>
        </div>
        <div class="dc_config">
            <button type="button" class="btn btn_grey btn_radius w_10" @click="commit_dc(1)" :class="chose_list=='chose_list'?'active':''">
                文书确认
            </button>
            <ul>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/ssty.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/sstys.png" class="active_icon" alt="icon" />
                    <p>手术同意书</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/aqhc.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/achcs.png" class="active_icon" alt="icon" />
                    <p>安全核查表</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/fxpg.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/fxpgs.png" class="active_icon" alt="icon" />
                    <p>风险评估书</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/sxsq.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/sxsqs.png" class="active_icon" alt="icon" />
                    <p>病例申请书</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/yphc.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/yphcs.png" class="active_icon" alt="icon" />
                    <p>精神毒麻药</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/mjty.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/mjtys.png" class="active_icon" alt="icon" />
                    <p>麻醉同意书</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/zqs.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/zqss.png" class="active_icon" alt="icon" />
                    <p>医用耗材</p>
                </li>
                <li :class="chose_list">
                    <img src="@/assets/img/icon/check/sxsq.png" class="deflaut_icon" alt="icon" />
                    <img src="@/assets/img/icon/check/sxsqs.png" class="active_icon" alt="icon" />
                    <p>输血申请</p>
                </li>
            </ul>
        </div>
        <div class="dc_config">
            <div class="dc_config_btn">
                <button class="btn btn_grey btn_radius action_btn" :class="step == '3'  ?'active':'' " @click="commit_dc(4)">确定</button>
                <button class="btn btn_defalut btn_radius action_btn">等待</button>
                <button class="btn btn_black btn_radius action_btn" @click="concel_ops()">取消</button>
            </div>
        </div>
    </section>
</template>

<script lang="ts">
    import { State, Action, Getter } from 'vuex-class';
    import { PatientInfo } from '@/store/common';
    import Component from 'vue-class-component';
    import Cancel from '@/components/modal/cancel/Cancel.vue';
    import Danger from '@/components/modal/danger/Danger.vue';
    import Scan from '@/components/modal/scan/Scan.vue';
    import {
        Prop,
        Vue,
        Watch

    } from 'vue-property-decorator';

    const namespace: string = 'patient';

    @Component({
        components: {
            Scan,
            Cancel,
            Danger
        },
    })

    export default class POperative extends Vue {
        chose_list = "";
        eye_img = require('@/assets/img/button/r_eye.png');
        step = "1";
        cancelBlock = false;
        dangerBlock = false;
        scanBlock = false;
        
       
        @Prop([Array, Object])toPatientInfo!:Array
        @Prop([Array, Object])toOperations!:Array

        PatientInfoData:any[]=[];
        operations:any[]=[];
       
        @Watch('toOperations') 
        ontoOperationsChanged(val:Array, oldVal:Array) {
          
            this.operations = val[0]; 
        }
        
        created() {

        }

        commit_dc(steps: any) {
            if (steps == "1") {
                if (this.chose_list == "") {
                    this.chose_list = "chose_list";
                    this.step = "2";
                } else {
                    this.chose_list = "";
                    this.eye_img = require('@/assets/img/button/r_eye.png');
                    this.step = "1";
                }
            } else if (steps == "2") {
                if (this.chose_list == "chose_list") {
                    if (this.step == "3") {
                        this.step = "2";
                        this.eye_img = require('@/assets/img/button/r_eye.png');
                    } else {
                        this.eye_img = require('@/assets/img/button/r_eyes.png');
                        this.step = "3";
                    }
                }
            } else if (steps == "4") {
                if (this.step == "3") {
                    this.scanBlock = true;
                }
            }
        }

        CloseModal(msg: any) {
            this.cancelBlock = false;
            this.dangerBlock = false;
            this.scanBlock = false;
        }

        concel_ops() {
            if (this.step == "3") {
                this.cancelBlock = true;
            }
        }

        mounted() {
            // console.log()
            // console.log(this.status)
            
        } 
    }
</script>

<style lang="scss" scoped>
    .operative_site {
        width: 40%;
        float: left;
        padding: 0 0.1rem;
        //height: $box_height;
        h1 {
            text-align: left;
            width: 100%;
            background: $color;
            padding: 0.1rem;
        }

        .people_img {
            height: 270px;
            position: relative;
            background: $color;
            padding: 0 0.1rem;

            .eye_btn {
                position: absolute;
                right: 0;
                top: 21px;
                cursor: pointer;
            }
        }

    }

    .dc_config {
        width: 40%;
        float: left;
        height:320px;
        .btn {
            border-radius: 5px;
        }
        ul {
            height:100%;
            background:$color;
            li {
                width: 50%;
                padding: 5px;
                cursor: pointer;

                p {
                    font-size: $small_p;
                }

                img {
                    width: 55%;
                    margin: auto;

                }

                .active_icon {
                    display: none;
                }

            }

            .chose_list {
                .deflaut_icon {
                    display: none;
                }

                .active_icon {
                    display: block;
                }
            }

        }
        &:last-child{
            width:20%;
            padding: 0 0.1rem;
        }
    }

    .dc_config_btn {
        padding: 0 0.1rem;
        background:$color;
        display: table-cell;
        height: $box_height;
        vertical-align: middle;
        button {
            width:100%;
            padding: 20px 0;
            margin-bottom: 20px;
            font-size: 0.16rem;
            display:table-cell;
            vertical-align:middle;
           
        }

        button:nth-child(1) {
            background: $color_state_start;
            color: $color;

            &.active {
                background: $warning_color;
            }
        }

        button:nth-child(2) {
            @extend .btn_defalut;
        }

        button:nth-child(3) {
            @extend .btn_black;
        }
    }
</style>